<template>
    <component is="a-modal" v-model:visible="visible" :width="1000" :title="title" :mask-closable="false"  @cancel="close" @ok="close">
       <a-table :columns="columns" :data="tableData" :loading="loading" :pagination="false">
           <template #stockroom="{record}">
                <div>{{ record?.stockroom?record?.stockroom?.name:''}}</div>
           </template>
       </a-table>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import systemApi from '@/api/system/system'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const title = ref('')

const columns = reactive([
    { title: 'SKU', dataIndex: 'sku', width: 180,align:'center' },
    { title: '目标仓库', slotName: 'stockroom', width: 180,align:'center'},
    { title: '入库数量', dataIndex: 'num', width: 180, align: 'center' },
    { title: '入库时间', dataIndex: 'create_time', width: 180, align: 'center' },
    { title: '操作员', dataIndex: 'hand_name', width: 180,align:'center' },
])
const searchForm=ref({
    id:''
})
// 打开弹框
const open = async (data) => {
    console.log('data', data);
    title.value = `流水记录 ID=${data.order_sn}`
    visible.value = true;
    searchForm.value.id = data.id
    refresh()
};
const tableData=ref([])
const refresh=async()=>{
    loading.value=true
    const {data}= await systemApi.cangku_input_flow(searchForm.value.id)
    tableData.value=data.sku_sign_list
    loading.value=false
}


// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open });
</script>